import NavHeader from '@/common/NavHeader'
import React, { Component } from 'react'
import style from './index.module.scss'
import { getCurrentCity } from '@/utils/city'
import axios from 'axios'

const BMap = window.BMap
export default class Map extends Component {
  async componentDidMount() {
    // 1. 获取当前城市
    const city = await getCurrentCity()

    //创建地图实例
    const map = new BMap.Map('container')
    // 将地址解析结果显示在地图上，并调整地图视野
    const myGeo = new BMap.Geocoder()
    myGeo.getPoint(
      city.label,
      async (point) => {
        //设置中心点坐标
        map.centerAndZoom(point, 11)
        // 添加地图控件
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.ScaleControl())

        //发请求 获取对应房源信息
        const res = await axios.get('http://localhost:8080/area/map', {
          params: {
            id: city.value,
          },
        })
        console.log('获取对应房源信息', res)
        const areas = res.data.body
        //遍历城市所有的区域
        areas.forEach((item) => {
          //区的所在位置
          const point = new BMap.Point(
            item.coord.longitude,
            item.coord.latitude
          )

          // 添加label标签 创建文本标注对象
          const label = new BMap.Label(
            `<div class="bubble">
          <p class="name">${item.label}</p>
          <p>${item.count}套套</p>
        </div>`,
            {
              position: point, //指定文本标注所在的地理位置
              offset: new BMap.Size(-35, -35),
            }
          )
          //往地图上添加样式
          label.setStyle({
            border: 'none',
            padding: 0,
          })
          //添加覆盖物
          map.addOverlay(label)

          // 覆盖物添加点击事件
          label.addEventListener('click', () => {
            console.log(123)
            //1.以区为中心，展示并放大地图
            map.centerAndZoom(point, 13)
            //2.清除原有的覆盖物
            setTimeout(() => {
              map.clearOverlays()
            }, 0)

            //3.根据当前区的id 发请求 渲染下一级的覆盖物
          })
        })
      },
      city.label
    )

    // //设置中心点坐标
    // const point = new BMap.Point(116.404, 39.915)
    // //初始化，设置缩放级别
    // map.centerAndZoom(point, 11)
  }
  render() {
    return (
      <div className={style.map}>
        <NavHeader>地图找房</NavHeader>
        <div id="container" className="container"></div>
      </div>
    )
  }
}
